<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>会员注册</title>
  <style>
    .refresh-btn {
      cursor: pointer;
      vertical-align: middle;
    }

    .birthday-input {
      position: relative;
    }

    .birthday-input::before {
      content: "年 / 月 / 日";
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      pointer-events: none;
    }

    .birthday-input:focus::before,
    .birthday-input:valid::before {
      display: none;
    }

    .person {
      align-items: center;
    }

    .form-item {
      display: flex;
      align-items: center;
    }

    /* 统一表单元素宽度 */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="date"],
    
    textarea {
      width: 200px; /* 调整这个值以达到与前三个输入框相同的宽度 */
    }
    
    /* 特殊处理文件上传和范围滑块 */
    input[type="file"],
    input[type="range"] {
      width: 200px;
    }
    select{
      width: 100px;
    }
  </style>
</head>

<body>
  <h3 style="color: blue;">欢迎注册会员</h3>
  <form>
    <div>
      <label for=""><b>手机号码：</b></label>
      <input type="text" placeholder="请输入11位电话号码" maxlength="11" required>
      &nbsp; <span style="color: red; font-size: small;">必填</span>
    </div>

    <div>
      <label for=""><b>创建密码：</b></label>
      <input type="password" placeholder="请输入密码" required>
      &nbsp; <span style="color: red; font-size: small;">必填</span>
    </div>

    <div>
      <label for=""><b>注册邮箱：</b></label>
      <input type="email" placeholder="例如:wustzz@sina.com">
      &nbsp; <span style="color: red; font-size: small;">必填</span>
    </div>

    <div>
      <label for=""><b>&emsp;验证码：</b></label>
      <input type="text" id="captchaInput" maxlength="4">
      <span class="captcha-display" id="captchaDisplay"></span>
      <img src="imgs/arrow_03.png" style="width: 30px;" class="refresh-btn" onclick="refreshCaptcha()">
    </div>

    <div>
      <label for=""><b>&emsp;&emsp;性别：</b></label>
      <input type="radio" name="sex" id="">
      <label for="male">男</label>
      <input type="radio" name="sex" id="">
      <label for="female">女</label>
    </div>

    <div>
      <label for=""><b>&emsp;&emsp;生日：</b></label>
      <input type="date" id="birthday" class="birthday-input">
    </div>

    <div>
      <label for=""><b>&emsp;&emsp;年龄：</b></label>
      <input type="text" name="" id="">
    </div>

    <div>
      <label for=""><b>&emsp;&emsp;籍贯：</b></label>
      <select name="" id="">
        <option value="">湖北省</option>
      </select>
      <select name="" id="">
        <option value="">武汉</option>
        <option value=""></option>
      </select>
    </div>

    <div>
      <label for=""><b>个人学历：</b></label>
      <select name="" id="">
        <option value="">本科</option>
        <option value="">研究生</option>
      </select>
    </div>

    <div>
      <label for=""><b>&emsp;&emsp;月薪：</b></label>
      <input type="range" id="salary" min="1000" max="20000" step="500" value="5000" oninput="updateSalary(this.value)">
      <span id="salaryValue">5000</span>
    </div>

    <div>
      <label for=""><b>个人爱好：</b></label>
      <input type="checkbox" name="hobbies" value="唱歌">唱歌
      <input type="checkbox" name="hobbies" value="跑步">跑步
      <input type="checkbox" name="hobbies" value="游泳">游泳
      <input type="checkbox" name="hobbies" value="阅读">阅读
      <input type="checkbox" name="hobbies" value="旅行">旅行
    </div>

    <div class="form-item">
      <label><b>个人照片：</b></label>
      <input type="file" id="photo" accept="image/*" onchange="previewImage(this)">
    </div>
    <!-- 添加图片预览区域 -->
    <div class="form-item" id="imagePreviewContainer" style="display: none;">
      <label><b>图片预览：</b></label>
      <img id="imagePreview" style="max-width: 200px; max-height: 150px; margin-left: 10px;">
    </div>
    <br>
    <div class="form-item">
      <label for=""><b>个人简介：</b></label>
      <textarea cols="23" rows="4" placeholder="请简单介绍一下自己..."></textarea>
    </div>

  </form>
</body>

<script>
  // 生成4位验证码
  function generateCaptcha() {
    const chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    let captcha = "";
    for (let i = 0; i < 4; i++) {
      captcha += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    document.getElementById("captchaDisplay").textContent = captcha;
  }

  // 刷新验证码
  function refreshCaptcha() {
    generateCaptcha();
  }

  // 更新月薪显示
  function updateSalary(value) {
    document.getElementById("salaryValue").textContent = value;
  }

  // 图片预览功能
  function previewImage(input) {
    const previewContainer = document.getElementById("imagePreviewContainer");
    const preview = document.getElementById("imagePreview");
    
    if (input.files && input.files[0]) {
      const reader = new FileReader();
      
      reader.onload = function(e) {
        preview.src = e.target.result;
        previewContainer.style.display = "flex";
      }
      
      reader.readAsDataURL(input.files[0]);
    } else {
      previewContainer.style.display = "none";
      preview.src = "";
    }
  }

  // 页面加载时生成验证码
  window.onload = function () {
    generateCaptcha();
  };
</script>

</html>